<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Document</title>  
  <!-- 确保 Vue.js 的路径是正确的，这里我使用了 CDN 作为示例 -->  
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <div ref="self">test</div>  
  </div>  
  <br>  
  <script>  
    var vm = new Vue({  
      el: "#app",  
      data: {  
        msg: 'ok'  
      },  
      beforeDestroy() {  
        console.log('销毁之前');  
        console.log(this.$refs.self); // 应该是一个 DOM 元素  
        console.log(this.msg); // 应该输出 'ok'  
        console.log(vm === this); // 应该输出 true，因为 vm 和 this 引用的是同一个 Vue 实例  
      },  
      destroyed() {  
        console.log('销毁之后');  
        console.log(this.$refs.self); // 在这里可能是 undefined，因为 Vue 实例已经被销毁了  
        console.log(this.msg); // 可能无法访问，因为 Vue 实例已经被销毁了  
        console.log(vm === this); // 可能无法访问，因为 Vue 实例已经被销毁了  
      }  
    });  
  
    // 注意：在常规浏览中，这些钩子通常不会触发，除非您手动销毁 Vue 实例  
    // 例如，通过 vm.$destroy() 方法或者移除 #app 元素  
  </script>  
</body>  
</html>